<template>
	<!-- 导航组 -->
	<div class="component-item">
		<div class="diy-menu-box"
			 :style="{'padding-left': item.borderMargin + 'px', 'padding-right': item.borderMargin + 'px', 'margin-top': item.pageMargin + 'px'}">
			<div class="menu-list" :style="{'background': item.bgColor}">
				<div class="menu-item"
					 :class="{'four' : item.num == 4, 'five': item.num == 5}"
					 v-for="(item2, index2) in item.content" :key="index2" @click="navTo(item2.link)">
					<div class="img-box">
						<i :class="item2.icon"
						   :style="{'font-size': item.iconSize + 'px', 'color': item.iconColor}"></i>
					</div>
					<p style="color: rgb(51, 51, 51);"
					   :style="{'font-size': item.fontSize + 'px'}">{{ item2.title }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "sliderGroup",
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			menuMap: {
				type: Array,
				default() {
					return []
				}
			},
		},
		data() {
			return {
				
			}
		},
		mounted() {
			
		},
		methods: {
			// 页面跳转
			navTo(url) {
				if (this.menuMap.indexOf(url) != -1) {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
		}
	}
</script>

<style scoped>
.diy-menu-box {
    width: 100%;
}
.menu-list {
    display: flex;
    flex-wrap: wrap;
}
.menu-list .menu-item {
    margin-top: 12px;
    font-size: 11px;
    color: #282828;
    text-align: center;
    width: 33.3333%;
	margin-bottom: 12px;
}
.img-box img {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%;
    object-fit: contain;
}
.menu-item.four {
    width: 25%;
}
.menu-item.five {
    width: 20%;
}	
</style>